<script lang="ts" name="person-new" setup>
import { withDefaults } from 'vue'
//defineProps 是不需要引入的  还有 defineExpose 宏函数
import type {Persons} from "@/types";

//只接收list
// defineProps(['a','list'])//必须是数组 但是打印不出来
// const a1 = defineProps(['a']) //这样可以,将接受的参数保存起来
// console.log(a1.a)//这样就可以拿到值

//接收list + 限制类型 + 限制必要性('?') + 指定默认值
// withDefaults(defineProps<{list?:Persons}>(), {
//   list: [{id: '0005',name: '刘能', age: 30}]
// })//?指的是必要性 这样list飘红, 因为list要是一个函数
withDefaults(defineProps<{list?:Persons}>(), {
  list: () => [{id: '0005',name: '刘能', age: 30}]
})

</script>

<template>
  <div class="person">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>